<template>
    <editor 
        v-model="textContent" 
        :init="init"
        :api-key="'no-api-key'"
    ></editor>
</template>
<script setup>
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' // 主题文件
import 'tinymce/icons/default'
import 'tinymce/models/dom' // Bug修复
// tinymce插件可按自己的需要进行导入
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // 插入上传图片插件
import "tinymce/plugins/importcss"; //图片工具
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import "tinymce/plugins/charmap"; // 特殊字符
import 'tinymce/plugins/wordcount' // 字数统计插件
import "tinymce/plugins/codesample"; // 插入代码
import "tinymce/plugins/code"; // 查看源码
import "tinymce/plugins/fullscreen"; //全屏
import 'tinymce/plugins/link' //
import 'tinymce/plugins/preview' // 预览
import "tinymce/plugins/template"; //插入模板
import 'tinymce/plugins/save' // 保存
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/insertdatetime"; //时间插入
import { ref,reactive,watch,onMounted } from "vue"
import api from '@/api/index.js'

const emit = defineEmits(["onDataEvent"])
const props = defineProps({
    value: {
        type: String,
        default: ''
    },
    options:{
        type:Object,
        default:() =>{}
    },
    remark:{
        type:String,
        default:""
    },
    editorID:{
        type:[String,Number],
        default:0
    },
    plugins: {
        type: [String, Array],
        default: 'lists image media table wordcount save preview'
    },
    toolbar: {
        type: [String, Array],
        default: 'undo redo |  formatselect | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | lists image media table | codesample code removeformat save preview'
        // default: 'formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help'
    }
})
const textContent = ref("")

const init = reactive({
    width: props.options?.width || '100%',
    height: props.options?.height || 300,
    language_url: '/tinymce/langs/zh-Hans.js',
    language: 'zh-Hans',
    // 皮肤：这里引入的是public下的资源文件
    skin_url: '/tinymce/skins/ui/oxide',
    plugins: props.plugins,
    toolbar: props.toolbar,
    content_css: '/tinymce/skins/content/default/content.css',
    branding: false,
    // 隐藏菜单栏
    menubar: false,
    // 是否显示底部状态栏
    statusbar: true,
    // 自动聚焦
    auto_focus: false,
    // 禁用自动调整大小
    resize: false,
    // 设置最小高度
    min_height: 200,
    // convert_urls: false,
    // 初始化完成
    init_instance_callback: (editor) => {
        // console.log("初始化完成：", editor)
    },
    // 销毁回调
    setup: (editor) => {
        editor.on('remove', () => {
            console.log('编辑器已销毁')
        })
    },
    // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
    // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
    images_upload_handler: (blobInfo, success, failure) => {
        try {
            const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            console.log("图片上传处理：", img)
            success(img)
        } catch (error) {
            console.error('图片上传失败:', error)
            failure('图片上传失败')
        }
    }
})

watch(props.value,(newValue,oldValue) =>{
    textContent.value = newValue
})

onMounted(()=>{
    // 数据显示处理
    if (props.remark) {
        textContent.value = props.remark
    } else if (props.editorID && props.editorID !== 0 && props.editorID !== null) {
        // 只有在有有效的editorID时才尝试加载数据
        api.getUpdateProject({ id: props.editorID }).then(res => {
            if (res.status === 200) {
                textContent.value = res.result.remark || ''
            }
        }).catch(error => {
            console.log('加载编辑器数据失败:', error);
        })
    }
})

watch(textContent,(newValue,oldValue) =>{
    emit("onDataEvent",newValue)
})

// 监听 remark prop 的变化
watch(() => props.remark, (newRemark) => {
    if (newRemark !== undefined && newRemark !== null) {
        textContent.value = newRemark
    }
})


// 暴露组件方法
defineExpose({
    close: () => {
        // 清理 tinymce 实例
        if (tinymce.activeEditor) {
            tinymce.activeEditor.remove()
        }
    }
})

</script>